/* 通用样式 */
:root {
  /* 核心色彩系统 */
  --primary-blue: #2A6BBC;      /* 主要蓝色，用于主要元素 */
  --primary-blue-light: #5392D5; /* 浅蓝色，用于次要元素 */
  --primary-blue-dark: #194980;  /* 深蓝色，用于悬停状态 */
  --primary-blue-bg: #EBF2FA;   /* 极浅蓝色，用于背景 */
  
  --secondary-green: #4BAE4F;   /* 辅助绿色 */
  --secondary-green-light: #7ED182; /* 浅绿色 */
  --secondary-green-dark: #378A3B; /* 深绿色 */
  --secondary-green-bg: #EDF7EE; /* 极浅绿色背景 */
  
  --accent-orange: #FF9800;     /* 强调橙色 */
  --accent-orange-light: #FFB74D; /* 浅橙色 */
  --accent-orange-dark: #F57C00; /* 深橙色 */
  --accent-orange-bg: #FFF5E6;  /* 极浅橙色背景 */
  
  --accent-purple: #7E57C2;     /* 强调紫色 */
  --accent-purple-light: #9C7AD8; /* 浅紫色 */
  --accent-purple-dark: #5E35B1; /* 深紫色 */
  --accent-purple-bg: #F4F0FA;  /* 极浅紫色背景 */
  
  /* 功能色彩系统 */
  --success: #4CAF50;
  --success-light: #A5D6A7;
  --success-dark: #388E3C;
  --success-bg: #E8F5E9;
  
  --warning: #FF9800;
  --warning-light: #FFCC80;
  --warning-dark: #F57C00;
  --warning-bg: #FFF3E0;
  
  --error: #F44336;
  --error-light: #EF9A9A;
  --error-dark: #D32F2F;
  --error-bg: #FFEBEE;
  
  --info: #2196F3;
  --info-light: #90CAF9;
  --info-dark: #1976D2;
  --info-bg: #E3F2FD;
  
  /* 中性色系统 */
  --grey-50: #FAFAFA;
  --grey-100: #F5F5F5;
  --grey-200: #EEEEEE;
  --grey-300: #E0E0E0;
  --grey-400: #BDBDBD;
  --grey-500: #9E9E9E;
  --grey-600: #757575;
  --grey-700: #616161;
  --grey-800: #424242;
  --grey-900: #212121;
  
  --text-primary: var(--grey-900);
  --text-secondary: var(--grey-600);
  --text-disabled: var(--grey-500);
  --divider: var(--grey-300);
  --background-white: #FFFFFF;
  --background-grey: var(--grey-100);
  --background-blue-light: var(--primary-blue-bg);
  --background-green-light: var(--secondary-green-bg);
  
  /* 阴影变量 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* 圆角变量 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* 过渡效果 */
  --transition-fast: 0.15s;
  --transition-normal: 0.25s;
  --transition-slow: 0.4s;
}

.app-container {
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  background-color: var(--background-grey);
  color: var(--text-primary);
}

/* 背景颜色类 */
.bg-blue { background-color: var(--primary-blue); }
.bg-green { background-color: var(--secondary-green); }
.bg-orange { background-color: var(--accent-orange); }
.bg-purple { background-color: var(--accent-purple); }
.bg-cyan { background-color: var(--secondary-green-light); }
.bg-yellow { background-color: var(--warning); }
.bg-red { background-color: var(--error); }
.bg-magenta { background-color: #eb2f96; }

/* 背景浅色类 */
.bg-blue-light { background-color: var(--primary-blue-bg); }
.bg-green-light { background-color: var(--secondary-green-bg); }
.bg-orange-light { background-color: var(--accent-orange-bg); }
.bg-purple-light { background-color: var(--accent-purple-bg); }
.bg-red-light { background-color: var(--error-bg); }

/* 状态类 */
.status-pending { background-color: var(--warning); color: white; }
.status-approved { background-color: var(--success); color: white; }
.status-rejected { background-color: var(--error); color: white; }
.status-processing { background-color: var(--info); color: white; }
.status-completed { background-color: var(--secondary-green); color: white; }

/* 按钮样式 */
.btn-primary {
  background-color: var(--primary-blue);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  transition: background-color var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--primary-blue-dark);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: var(--background-grey);
  color: var(--text-primary);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  transition: all var(--transition-normal);
}

.btn-secondary:hover {
  background-color: var(--grey-200);
  border-color: var(--grey-400);
}

/* 文本颜色类 */
.text-primary { color: var(--primary-blue); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }
.text-disabled { color: var(--text-disabled); }

/* 阴影类 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* 圆角类 */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }

/* 辅助类 */
.hidden {
  display: none;
} 